<template>
  <div class="gz-select table-search-item">
    <slot />
    <label :class="{ 'select-up': isUp }">{{ placeholder }}</label>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick, watchEffect } from 'vue'

// 定义父组件的传参和类型
const props = defineProps({
  placeholder: { type: String, default: '' },
  reset: { type: Number, default: 0 }, // 用于监听父组件的重置事件是否被点击
})
let isUp = ref(false) // 文字是否上移

watch(() => props.reset, () => {
  isUp.value = false
})

const textupHandle = () => isUp.value = true

defineExpose({ textupHandle })
</script>

<style scoped lang="less">
.gz-select {
  position: relative;

  /deep/ .ant-select {
    width: 100%;
    outline: 0;
    transition: all 0.2s ease;
    height: 34px;
    border-color: #e6e7ed;
  }

  label {
    user-select: none;
    position: absolute;
    left: 17px;
    bottom: 50%;
    transform: translateY(50%);
    padding: 0px 5px;
    color: #bfbfbf;
    font-size: 13px;
    transition: all 0.2s ease;
    border-radius: 3px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: initial;
    z-index: 1;
  }

  .ant-select-open + label {
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-align: left;
    color: @primary-color;
    background: #fff; // 更换背景色
    transform: translateY(-12px);
  }

  .select-up {
    font-size: 12px;
    color: @primary-color;
    background: #fff; // 更换背景色
    transform: translateY(-12px);
  }
}
</style>
